// LanguageSwitcher/index.tsx - 语言切换器组件
// 这个组件提供一个下拉选择框，允许用户切换应用的语言

// 导入React：必须导入React才能使用JSX语法和React功能
import React from 'react';
// 导入Ant Design的Select组件：提供美观的下拉选择框
import { Select } from 'antd';
// 导入useTranslation Hook：从react-i18next获取国际化功能
import { useTranslation } from 'react-i18next';

// 定义LanguageSwitcher组件：使用React.FC（函数组件）类型
// 这是一个无状态函数组件，只负责渲染语言选择下拉框
const LanguageSwitcher: React.FC = () => {
  // 使用useTranslation Hook获取i18n实例
  // useTranslation是react-i18next提供的Hook，用于访问国际化功能
  // 这里通过解构赋值获取i18n对象，用于改变语言
  const { i18n } = useTranslation();

  // 处理语言切换事件：当用户选择不同语言时调用
  // value参数：用户选择的语言代码（如'zh-CN'或'en'）
  const handleLanguageChange = (value: string) => {
    // 调用i18n的changeLanguage方法切换语言
    // 这会改变整个应用的语言，并触发重新渲染显示对应语言的文本
    i18n.changeLanguage(value);
  };

  // 返回组件的JSX结构
  // 在React中，组件必须返回一个React元素（JSX）
  return (
    // 使用Ant Design的Select组件
    // defaultValue：设置默认选中的值，使用当前语言i18n.language
    // style：设置下拉框的宽度为120像素
    // onChange：设置选择变化时的回调函数，即handleLanguageChange
    // options：配置下拉框的选项数组，每个选项包含value和label
    <Select
      defaultValue={i18n.language}
      style={{ width: 120 }}
      onChange={handleLanguageChange}
      options={[
        { value: 'zh-CN', label: '中文' }, // 中文选项
        { value: 'en', label: 'English' }, // 英文选项
      ]}
    />
  );
};

// 导出LanguageSwitcher组件作为默认导出
// 这样其他文件可以通过import LanguageSwitcher from '@/components/LanguageSwitcher'来导入
export default LanguageSwitcher;